<template>
	<mescroll-uni ref="mescroll" @getData="getListData">
		<block slot="list">
			<swiper class="swiper-box" :autoplay="true" v-if="advs.length > 0 && list.length > 0">
				<swiper-item v-for="(item, index) in advs" :key="index">
					<view class="item" @click="redirectTo(item.adv_url)"><image :src="$util.img(item.adv_image)" /></view>
				</swiper-item>
			</swiper>
			
			<block v-if="list.length">
				<view class="goods-list" style="margin-top: 20rpx;">
					<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.goods_id)">
						<view class="image-wrap">
							<image lazy-load="true" :src="$util.img(item.pic_cover_small)" mode="aspectFill"></image>
							<view v-if="!item.time_out" class="time-wrap">
								<uni-count-down
									:day="item.timeMachine.d"
									:hour="item.timeMachine.h"
									:minute="item.timeMachine.i"
									:second="item.timeMachine.s"
									color="#FFF"
									splitorColor="#333"
									background-color="#333"
									border-color="transparent"
									:showColon="true"
								></uni-count-down>
							</view>
							<view v-else class="time-wrap active-over">活动已结束</view>
						</view>
						<text class="goods-name">{{ item.goods_name }}</text>
						<view class="price-wrap">
							<text class="display-price">{{ item.display_price }}</text>
							<text v-if="item.market_price > item.display_price" class="market-price">￥{{ item.market_price }}</text>
						</view>
					</view>
				</view>
			</block>
			
			<view v-if="isEmpty && list.length == 0" class="empty">
				<view class="iconfont iconwenzhangchaxun"></view>
				<view class="ns-text-color-gray">没有找到商品</view>
			</view>
			
		</block>
	</mescroll-uni>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';

export default {
	components: {
		uniLoadMore,
		uniCountDown
	},
	mixins: [http],
	data() {
		return {
			currentTime: 0,
			advs: [],
			pageIndex: 1,
			pageCount: 0,
			list: [],
			status: 'loading',
			indent: false, //防止初始化时，触发上拉加载
			isEmpty: false,
			isIphoneX: false //判断手机是否是iphoneX以上
		};
	},
	async onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
		await this.getCurrentTime();
		this.getAdvDetail();
		if (this.$refs.mescroll) this.$refs.mescroll.refresh();
	},
	methods: {
		goDetail(goodsId) {
			this.$util.redirectTo('/pages/goods/detail/detail', { goods_id: goodsId });
		},
		/* 获取服务器时间戳 */
		async getCurrentTime() {
			let res = await this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				async: false
			});
			this.currentTime = res.data / 1000;
		},
		//获取广告位详情
		getAdvDetail() {
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: { 
					// #ifdef H5
					ap_keyword: 'WAP_DISCOUNT_SWIPER',
					// #endif
					// #ifdef MP
					ap_keyword: 'APPLET_DISCOUNT_SWIPER',
					// #endif
					export_type: 'data' ,
				},
				success: res => {
					if (res.data && res.data.advs){
						this.advs = res.data.advs;
					}
				}
			});
		},
		getListData(mescroll) {
			this.sendRequest({
				url: 'System.Goods.goodsDiscountList',
				data: {
					page_index: mescroll.num,
					page_size: mescroll.size
				},
				success: res => {
					let newArr = res.data.data;
					if (newArr.length){
						for (let i = 0; i < newArr.length; i++) {
							newArr[i].timeMachine = this.$util.countDown(newArr[i].end_time - this.currentTime);
							newArr[i].time_out = newArr[i].end_time - this.currentTime <= 0 ? true : false;
						}
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(newArr); //追加新数据
				},
				fail() {
					//联网失败的回调
					mescroll.endErr();
				}
			});
		},
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		},
		scrolltolower(){
			if (!this.indent) return;
			this.getGoodsDiscountList();
		}
	}
};
</script>

<style lang="scss">
.content{
	height: 100vh;
	background: $page-color-base;
}
.padding-bottom {
	padding-bottom: 68rpx !important;
}
.swiper-box {
	height: 350rpx;
	.item {
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.goods-list {
	overflow: hidden;
	
	.item {
		width: 364rpx;
		float: left;
		margin-bottom: 20rpx;
		position: relative;
		background: #fff;
		padding: $ns-padding;
		box-sizing: border-box;
		border-radius: 10rpx;
		&:nth-child(even) {
			float: right;
		}
		.image-wrap {
			display: inline-block;
			width: 100%;
			height: 320rpx;
			line-height: 320rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.time-wrap {
				width: 100%;
				font-size: $ns-font-size-sm;
				position: absolute;
				left: 0;
				bottom: 0;
				text-align: left;
				background-color: $ns-bg-color-gray;
				padding: 10rpx;
				box-sizing: border-box;
				text-align: center;
			}
			.active-over {
				text-align: center;
				color: #fff;
			}
		}

		.goods-name {
			text-align: left;
			display: block;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: $ns-font-size-base;
			font-weight: 600;
			line-height: 1;
		}

		.price-wrap {
			overflow: hidden;
			margin-top: 6rpx;
			.display-price {
				font-weight: bold;
				font-size: $ns-font-size-base;
				color: $base-color;
			}
			.market-price {
				font-size: 12px;
				float: right;
				color: $ns-text-color-gray;
				text-decoration: line-through;
			}
		}
	}
}
</style>
<style scoped>
.time-wrap >>> .uni-countdown__number {
	padding: 0 4rpx !important;
	margin: 0 !important;
	height: 40rpx;
	line-height: 40rpx;
}
</style>
